<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template #header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">93,634</div>
                <v-chart :options="searchUserOption" />
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">198,782</div>
                <v-chart :options="searchUserOption" />
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData">
                <el-table-column prop="rank" label="排名" ></el-table-column>
                <el-table-column prop="keyword" label="关键词" ></el-table-column>
                <el-table-column prop="count" label="总搜索量" ></el-table-column>
                <el-table-column prop="rank" label="搜索用户数" ></el-table-column>
              </el-table>
              <el-pagination
                layout='prev, pager, next'
                :total="100"
                :page-size="4"
                background
                @current-change="onPageChange"
              />
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template #header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <div class="chart-wrapper">
            <v-chart :options="categoryOption" />
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchUserOption: {
        xAxis: {
          type: 'category',
          boundaryGap: false, //x轴靠边
        },
        yAxis: {
          show: false,
        },
        series: [{
          type: 'line',
          data: [200, 150, 200, 100, 200, 350, 150, 450],
          areaStyle: {
            color: 'rgba(96,187,255,.5)'
          },
          lineStyle: {
            color: 'rgba(95,187,255)'
          },
          itemStyle: {
            opacity: 0
          },
          smooth: true
        }],
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        }
      },
      searchNumberOption: {},
      tableData: [
        {id: 1,rank: 1,keyword: '北京', count: 100, users: 90, rang: '90%'},
        {id: 2,rank: 2,keyword: '北京', count: 100, users: 90, rang: '90%'},
        {id: 3,rank: 3,keyword: '北京', count: 100, users: 90, rang: '90%'},
        {id: 4,rank: 4,keyword: '北京', count: 100, users: 90, rang: '90%'}
      ],
      radioSelect: '品类',
      categoryOption: {}
    }
  },
  mounted() {
    this.renderPieChart()
  },
  methods: {
    onPageChange(page) {
      
    },
    renderPieChart() {
      const mockData = [
        {
          legendname: '粉面粥店',
          value: 67,
          percent:'15.40%',
          itemStyle: {
            color: '#e7e702'
          },
          name: '粉面粥店 | 15.40%'
        },{
          legendname: '简餐便当',
          value: 97,
          percent:'22.30%',
          itemStyle: {
            color: '#8d7fec'
          },
          name: '简餐便当 | 22.30%'
        },{
          legendname: '汉堡披萨',
          value: 92,
          percent:'21.15%',
          itemStyle: {
            color: '#5085f2'
          },
          name: '汉堡披萨 | 21.15%'
        },
      ]
      this.categoryOption = {
        title: [{
          text: '品类分布',
          textStyle: {
            fontSize: 14,
            color: '#666'
          },
          left: 20,
          top: 20,
        }, {
          text: '累计订单量',
          subtext: '320',
          x: '34.5%', //偏移量
          y: '42.5%', //偏移量
          textAlign: 'center', // 让它居中
          textStyle: {
            fontSize: 14,
            color: "#999"
          },
          subtextStyle: {
            fontSize: 28,
            color: "#333"
          }
        }],
        series: [{
          name: '品类分布',
          type: 'pie',
          data: mockData,
          label: {
            normal: { // 通过normal来进行修改
              show: true,
              position: 'outter', // 决定label的显示为位置
              formatter: function(params) {
                return params.data.legendname
              }
            }
          },
          center: ['35%', '50%'], // 圆心的位置
          radius: ['45%', '60%'], //半径 参1：内半径 参2：外半径
          labelLine: {
            normal: {
              length: 5, // 线段1 靠近环形的
              length2: 3, //线段2 靠近文字的
              smooth: true
            }
          },
          clockwise: true, //顺时针排序 
          itemStyle: {
            borderWidth: 4,
            borderColor: "#fff", //这样设置之后每个item都会有一个4px的白色border，这样看起来就有间距了
          }
        }],
        legend: { // 数据源里必须有name属性，这个才会生效
          type: 'scroll', // 可以滑动
          orient: 'vertical', //垂直方向
          height: 250, //如果高度不够就会出现上下箭头
          left: '70%',
          top: 'middle', //居中显示
          textStyle: {
            color: '#8c8c8c'
          }
        },
        tooltip: {
          trigger: 'item', //默认是item，鼠标移入item会触发
          formatter: function(params) {
            const str = params.seriesName + '<br />' +
                        params.marker + params.data.legendname + '<br />' +
                        '数量：' + params.data.value + '<br />' +
                        '占比：' + params.data.percent;
            // seriesName 系列的名称 marker 圆点
            return str
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;
  .view{
    flex: 1;
    width: 50%;
    box-sizing: border-box;
    &:first-child {
      padding: 0 10px 0 0;
    }
    &:last-child {
      padding: 0 0 0 10px;
    }
    .title-wrapper{
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 0 20px;
      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }
    .chart-wrapper{
      display: flex;
      flex-direction: column;
      height: 452px;
      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;
        .chart {
          flex: 1;
          padding: 0 10px;
          .chart-title {
            color: #999;
            font-size: 14px;
          }
          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }
          .echarts {
            height: 50px;
          }
        }
      }
      .table-wrapper {
        margin-top: 20px;
        padding: 0 20px;
        .el-pagination{
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>